<template>
  <div>
    <!-- 轮播图 -->
    <swiper :options="swiperOption">
      <swiper-slide><img class="w-100" src="../assets/images/轮播1.jpg"/></swiper-slide>
      <swiper-slide><img class="w-100" src="../assets/images/轮播2.jpg"/></swiper-slide>
      <swiper-slide><img class="w-100" src="../assets/images/轮播3.jpg"/></swiper-slide>
      <div class="swiper-pagination pagination-home" slot="pagination"></div>
    </swiper>

    <!-- 图标导航 -->
    <div class="nav-icon bg-white mt-3 fs-sm text-center pt-3 text-dark-1">
      <!-- 12个图标 -->
      <div class="d-flex flex-warp" :class="{packup: packUp === true}">
        <div class="nav-item mb-5">
          <i class="sprite sprite-news fs-xs"></i>
          <div>爆料站</div>
        </div>
        <div class="nav-item mb-5">
          <i class="sprite sprite-tale"></i>
          <div>故事站</div>
        </div>
        <div class="nav-item mb-5">
          <i class="sprite sprite-store"></i>
          <div>周边商城</div>
        </div>
        <div class="nav-item mb-5">
          <i class="sprite sprite-experience"></i>
          <div>体验服</div>
        </div>
        <div class="nav-item mb-5">
          <i class="sprite sprite-newMans"></i>
          <div>新人专区</div>
        </div>
        <div class="nav-item mb-5">
          <i class="sprite sprite-inherit"></i>
          <div>荣耀·传承</div>
        </div>
        <div class="nav-item mb-5">
          <i class="sprite sprite-simulate"></i>
          <div>模拟战资料库</div>
        </div>
        <div class="nav-item mb-5">
          <i class="sprite sprite-campsite"></i>
          <div>王者营地</div>
        </div>
        <div class="nav-item mb-5">
          <i class="sprite sprite-tencent"></i>
          <div>公众号</div>
        </div>
        <div class="nav-item mb-5">
          <i class="sprite sprite-versions"></i>
          <div>版本介绍</div>
        </div>
        <div class="nav-item mb-5">
          <i class="sprite sprite-game"></i>
          <div>对局环境</div>
        </div>
        <div class="nav-item mb-5">
          <i class="sprite sprite-infinite"></i>
          <div>无限王者团</div>
        </div>
        <div class="nav-item mb-5">
          <i class="sprite sprite-creativity"></i>
          <div>创意互动营</div>
        </div>
      </div>
      <!-- 收起 -->
      <div class="py-2 bg-light pack" @click="() => packUp = !packUp">
        <i class="sprite sprite-pack mx-2"></i>
        <span>{{packUp === true ? '展开' : '收起'}}</span>
      </div>
    </div>

    <!-- 新闻资讯 -->
    <m-list-card icon="menu" title="新闻资讯" :categories="newsData">
      <template #items="{item}">
        <router-link tag="div" :to="`/articles/${news._id}`" class="py-2 fs-lg d-flex jc-between" v-for="(news, i) in item.newsList" :key="i">
          <span>[{{news.categories}}]</span>
          <span class="px-2">|</span>
          <span class="news.createdAt flex-1 text-ellipsis pr-2">{{news.title}}</span>
          <span class="text-grey fs-md">{{news.createdAt | date}}</span>
        </router-link>
      </template>
    </m-list-card>

    <!-- 英雄列表 -->
    <m-list-card icon="card-hero" title="英雄列表" :categories="heroData" imgSrc="//ossweb-img.qq.com/upload/webplat/info/yxzj/20200108/20796372351730.jpg">
      <template #items="{item}">
        <div class="d-flex flex-warp" style="margin: 0 -0.5rem">
          <router-link :to="`/heroes/${hero._id}`" tag="div" class="py-2 px-2 text-center" style="width: 20%" v-for="(hero, i) in item.heroList" :key="i">
            <img :src="hero.avatar" class="w-100">
            <div>{{hero.name}}</div>
          </router-link>
        </div>
      </template>
    </m-list-card>

    <!-- 图文攻略 -->
    <m-list-card icon="tushu" title="图文攻略" :categories="strategyData">
      <template #items="{item}">
        <router-link :to="`/strategy/${strategy._id}`" tag="div" 
        v-for="(strategy, i) in item.itemsArr" :key="i" class="d-flex strategy px-1 pb-3"
        >
          <img :src="strategy.img" class="img">
          <div class="ml-3">
            <p class="fs-lg">{{strategy.title}}</p>
            <div class="fs-xs text-grey mt-4">{{strategy.createdAt | date}}</div>
          </div>
        </router-link>
        <div class="fs-sm text-dark-2 text-center py-1 mt-2">点击加载更多</div>
      </template>
    </m-list-card>
  </div>
</template>

<script>
//专门格式化日期的插件
import dayjs from 'dayjs'
export default {
  filters: {
    date(val) {
      return dayjs(val).format('MM/DD')
    }
  },
  data() {
    return {
      swiperOption: {
        pagination: {
          el: ".swiper-pagination"
        }
      },
      newsData: [],
      heroData: [],
      strategyData: [],
      packUp: false
    }
  },
  methods: {
    async fetchNewsData() {
      const res = await this.$http.get('/news/list')
      this.newsData = res.data
    },
    async fetchHeroData() {
      const res = await this.$http.get('/heroes/list')
      this.heroData = res.data
    },
    async fetchStrategy () {
      const res = await this.$http.get('/strategy')
      this.strategyData = res.data
    }
  },
  created() {
    this.fetchNewsData()
    this.fetchHeroData()
    this.fetchStrategy()
  }
}
</script>

<style lang="scss">
.pagination-home {
  padding-right: 1rem;
  text-align: right !important;
  .swiper-pagination-bullet {
    background: #fff;
    border-radius: 0.1538rem;
    &.swiper-pagination-bullet-active {
      background-color: #4b67af;
    }
  }
}
.nav-icon {
  border-top: 1px solid #d4d9de;
  border-bottom: 1px solid #d4d9de;
  .nav-item {
    width: 25%;
    border-right: 1px solid #d4d9de;
    &:nth-child(4n) {
      border-right: none;
    }
  }
  .pack {
    margin-top: -2.5rem;
    border-bottom: 1px solid #d4d9de;
  }
  .packup {
    height: 5.9rem;
    overflow: hidden;
  }
}
</style>
